<template>
  <div class="card-dialog" v-show="visible" :style="`width: ${width};left: calc(50% - (${width} / 2))`">
    <div class="modules-bg">
      <div class="modules-bg-corner top-left"></div>
      <div class="modules-bg-corner top-right"></div>
      <div class="modules-bg-corner bottom-left"></div>
      <div class="modules-bg-corner bottom-right"></div>
    </div>
    <div class="dialog-head">
      <div class="head-title">
        <div class="head-icon"></div>
        <div class="head-text">{{ title }}</div>
      </div>
      <div class="head-button">
        <CloseOutlined class="close-button" @click="handleClose" />
      </div>
    </div>
    <div class="dialog-content">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
  import { nextTick } from 'vue';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '600px',
    },
    title: {
      type: String,
      default: '',
    },
  });

  const emit = defineEmits(['update:visible', 'close']);
  function handleClose() {
    emit('update:visible', !props.visible);
    nextTick(() => {
      emit('close');
    });
  }
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
